无心 | 人生若只如初见，何事秋风悲画扇
2019-03-27 | 重学前端系列笔记 | UNLOCK

1. 重新认识 JavaScript 类型

前言

最新在看witter大神的专栏《重学前端》，感慨颇多，收益也颇多。觉得自己该重建一下前端的知识体系，所以跟着写下这个笔记。

补充*

  • 变量声明跟赋值，是两个概念。
  • let a 是属于变量声明阶段，这个阶段所有的变量的值都是 undefined 。a = 12JS** 解析引擎。这个变量是什么类型以及它的值多少。
  • 当 JavaScript 执行的时候，如果遇到致命错误便会停止往下执行。
    1
    2
    3
    4
    5
    6
    //bad声明方式
    var a=b=2;
    // good
    var a=12,b=23;
    // 但是更期望使用let声明，不用变量提升
    let a = 12;

怎么准确的判断数据类型

1
2
3
4
let str = "你是谁，我是战无不胜的孙悟空"
Object.prototype.toString.call(str) // [object,String];
let arr = [1,4,56];
Object.prototype.toString.call(arr) // [object,Array];

JavaScript现有常见类型

  • Null
  • Undefined
  • String
  • Boolean
  • Number
  • Symbol
  • Object

现在JavaScript常见类型是这么多，其中只有 Symbol 是 ES6 新提出来的，其余都是 ES6 之前早就熟悉的类

（0）Null

  • 这个类型表示：定义了但是为空

  • Null 类型也只有一个值，就是 null，它的语义表示空值，与 undefined 不同，null 是 JavaScript 关键字，所以在任何代码中，你都可以放心用 null 关键字来获取 null 值。

    （1）Undefined

  • 这个类型表示：变量定义了但是未赋值

  • 任何变量在赋值前是 Undefined 类型、值为 undefined，一般我们可以用全局变量 undefined（就是名为 undefined 的这个变量）来表达这个值

  • 它同样的表示一个变量的值，它并非一个关键词，这是 JavaScript 语言公认的设计失误之一，所以，所以，我们为了避免无意中被篡改，我建议使用 void 0 来来获取 Nudefined 值。

  • 它与 Null 的不同就是，Null 是 JavaScript 的关键字，在开发中可以自由的获取 Null 类型的变量

    （2）Boolean

  • 这个类型表示：逻辑上的真和假

  • 它有两个值：true 和 false

  • 它属于 JavaScript 中的内置对象，可以通过 new 关键词创造实例对象

    （3）String

  • 这个类型表示：表示文本数据

  • 这个类型具有长度单位的，最大的长度 2^53-1 ，

  • 这个 String 并非文本意义的字符串，而是字符串的 UTF16 编码，我们日常操作字符使用的 length charAt 都是针对 UTF16 编码

  • 字符串的最大长度是受经过 UTF16 编码之后的字符长度限制

    补充编码知识

    Note：现行的字符集国际标准，字符是以 Unicode 的方式表示的，每一个 Unicode 的码点表示一个字符，理论上，Unicode 的范围是无限的。UTF 是 Unicode 的编码方式，规定了码点在计算机中的表示方法，常见的有 UTF16 和 UTF8。 Unicode 的码点通常用 U+??? 来表示，其中 ??? 是十六进制的码点值。 0-65536（U+0000 - U+FFFF）的码点被称为基本字符区域（BMP）。

（4）Number

  • 这个类型表示：通常意义的数字类型
  • 它是 JavaScript 的内置对象，可以通过 new 关键字创造实例
  • 它类型有 **2^64-2^53+3** 个值
  • 在为了避免计算的时候出错，借鉴生活中的数学，引入了 NaN (这个可以用来检测是否为数字类型)、Infinity(正无穷大)、-Infinity(负无穷大)
  • 在加减法中 -0+0 **没有很大的区别，但是在除法中就会很大的区别了
1
2
console.log(.00001 / -0); //结果：-Infinity
console.log(.00000000001 / 0); //结果: Infinity
  • 根据双精度浮点数的定义，Number 类型中有效的整数范围是-0x1fffffffffffff 至0x1fffffffffffff，所以 Number 无法精确表示此范围外的整数。所以在非整数面前是无法使用 == 或者 === 进行比较的
1
2
console.log( .1 + .2 == .3 ); //结果：false;
console.log(.1 + .2);  // 结果：0.30000000000000004
  • 正确的比较两边数值是否相等，应该比较左右两边差的绝对值是否小于最小精度
1
console.log(Math.abs(.1 + .2 - .3) <=Number.EPSILON); // true

Number.EPSILONES6 Number *的一个常量。
*Number.EPSILON 实际上是 JavaScript 能够表示的最小精度。误差如果小于这个值，就可以认为已经没有意义了，即不存在误差了。

（5）Object

  • 这个类型表示：对象，它是一切有形和无形物体的总称

  • 它是属性的集合，是 key-value 结构

  • *key : *可以是字符串类型。也可以是symbol类型

  • value :可以是字符串，可以是数值类型。也可以是对象类型

    （6）Symbol

  • 这个类型是 **ES6** 新增的一个类型。其实说实话，到现在还不太清楚这个类型的作用，以及用法

  • 它是一切非字符串的对象 key 的集合

  • Symbol 可以具有字符串类型的描述，但是即使描述相同，Symbol 也不相等

1
2
3
// 创建 Symbol 类型
let symbol = Symbol("其实，我是一个好人");
console.log(symbol)

  • 这个类型还是有很多不懂，之后有了新收获，再过来更新吧

    类型转换

    （0）string → Number(字符串转成数值类型)

  • 常见都是借助 JavaScript 中的内置方法进行转换，例如 **parseInt** **parseFloat** 都是将字符串转化成数值类型。但是 **parseInt** 是遇到非数值就停下，而** ** **parseFloat** 遇到不属于数字行列才会停，

  • **parseInt** **parseFloat** 转化的字符串，如果第一个字符不是数字的话，就会返回 NaN

  • 除了上述的两种，还有 JavaScriptMath *NaN *

  • 还有一种就是利用装箱操作，利用 NumberNaN**

  • 如果字符串的字符都是数字。那么可以使用四则运算，也可以进行隐士转换

1
2
3
4
console.log(parseInt("6340.54")); // 结果:6340
console.log(parseFloat("4.648781655wr我是1"));结果:4.648781655
console.log(Number("2.2.22")); // 结果:NaN
console.log(Number("5464646")) // 结果: 5464646

（1）Number → string (数字转化成字符串)

  • 字符串拼接
1
2
3
let str = 121343454545;
str = str+ "";
console.log(typeof(str)) // 结果：string
  • 装箱转换
    1
    2
    let str = 13243545646;
    console.log( typeof( String(str) ) ) // 结果：string

（2）装箱操作转换

  • 在 **JavaScript** 中，类型之间存在装箱转换操作
1
2
3
let str = 1323;
console.log(typeof (String(str))); // string
console.log(typeof (Symbol(str))) // symbol

其他的数据类型

  • List 和 Record ： 用于描述函数传参过程。
  • **Set** ：主要用于解释字符集等。
  • Completion Record ：用于描述异常、跳出等语句执行过程。
  • Reference ：用于描述对象属性访问、delete 等。
  • Property Descriptor ：用于描述对象的属性。
  • Lexical Environment 和 Environment Record ：用于描述变量和作用域。
  • Data Block ：用于描述二进制数据。

    程序 = 算法 + 数据结构

JavaScript数据类型

评论加载中